<#include "../common/head.ftl" />
<!DOCTYPE html>
<html>
<head lang="en">
<@comme_head />
    <meta charset="UTF-8">
    <title>点击数量统计</title>

    <script src="/js/common-js/echarts.js"></script>
    <script src="/js/teacher-bar.js"></script>
    <script>
        $(function(){
            function xiala(oClass,oId1,oId2){
                $(oClass).click(function(){
                    $(oId1).slideToggle();
                    $(oClass+' i').toggleClass('xiasanjiao','sanjiao');

                });
                $('.show2').click(function(){
                    $(oId2).slideToggle();
                });
            }
            xiala('.show','#box','#box1');
            xiala('.tiku','#box2','#box3');
            var oT=$(window).height();
            var oW=$(window).width();
            var oCha=oT-42;
            var oCha2=oW-225;
            $('#main').css({
                'width':'100%',
                'height':oCha
            });
            $('.right-content').css('width',oCha2);
            $(window).on('resize',function(){
                var oT=$(window).height();
                var oW=$(window).width();
                var oCha=oT-42;
                var oCha2=oW-225;
                $('#main').css({
                    'width':'100%',
                    'height':oCha
                });
                $('.right-content').css('width',oCha2)
            });
           myChart = echarts.init(document.getElementById('chart1'));


    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                data:[${Week1.zhClickCount!}, ${Week2.zhClickCount!}, ${Week3.zhClickCount!}, ${Week4.zhClickCount!}, ${Week5.zhClickCount!}, ${Week6.zhClickCount!}, ${Week0.zhClickCount!}]
            },
            {
                name:'邮件营销',
                type:'bar',
                stack: '广告',
                data:[${Week1.emailClickCount!}, ${Week2.emailClickCount!}, ${Week3.emailClickCount!}, ${Week4.emailClickCount!}, ${Week5.emailClickCount!}, ${Week6.emailClickCount!}, ${Week0.emailClickCount!}]
            },
            {
                name:'联盟广告',
                type:'bar',
                stack: '广告',
                data:[${Week1.lianmClickCount!}, ${Week2.lianmClickCount!}, ${Week3.lianmClickCount!}, ${Week4.lianmClickCount!}, ${Week5.lianmClickCount!}, ${Week6.lianmClickCount!}, ${Week0.lianmClickCount!}]
            },
            {
                name:'视频广告',
                type:'bar',
                stack: '广告',
                data:[${Week1.viewClickCount!}, ${Week2.viewClickCount!}, ${Week3.viewClickCount!}, ${Week4.viewClickCount!}, ${Week5.viewClickCount!}, ${Week6.viewClickCount!}, ${Week0.viewClickCount!}]
            },
            {
                name:'搜索引擎',
                type:'bar',
                data:[${Week1.seachClickCount!}, ${Week2.seachClickCount!}, ${Week3.seachClickCount!}, ${Week4.seachClickCount!}, ${Week5.seachClickCount!}, ${Week6.seachClickCount!}, ${Week0.seachClickCount!}],
                markLine : {
                    lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },
                    data : [
                        [{type : 'min'}, {type : 'max'}]
                    ]
                }
            },
            {
                name:'必应',
                type:'bar',
                stack: '搜索引擎',
                data:[${Week1.biyClickCount}, ${Week2.biyClickCount}, ${Week3.biyClickCount}, ${Week4.biyClickCount}, ${Week5.biyClickCount!}, ${Week6.biyClickCount}, ${Week0.biyClickCount}]
            },
            {
                name:'其他',
                type:'bar',
                stack: '搜索引擎',
                data:[${Week1.otherClickCount}, ${Week2.otherClickCount}, ${Week3.otherClickCount}, ${Week4.otherClickCount}, ${Week5.otherClickCount!}, ${Week6.otherClickCount}, ${Week0.otherClickCount}]
            }
        ]
    };

    myChart.setOption(option);
        })
    </script>
</head>
<body>
<@comme_header />
<div class="main clearfix" id="main">
	<@comme_daohang />
    <div class="right-content">
        <div id="chart1" style="width:800px;height:600px;"></div>
    </div>
</div>
</body>
</html>